<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{background-color:#F0F0F0;}
			.tiji{
				position: absolute;
				
			
			}
			.name1{width: 200px;
			        height: 100px;
			        background-color: white;
			        border-radius: 200px 200px 0px 0px;
			        position: relative;
			        box-shadow: 0px 0px 10px #EDDE74;}
		    .name2{width: 200px;
			        height: 100px;
			        background-color: black;
			        border-radius: 0px 0px 200px 200px;
			        position: relative;
			         box-shadow: 0px 0px 10px #EDDE74;}
		     .n1{width: 100px;
		            height: 100px;
		            border-radius: 50%;
		            background-color:black;
		            position: absolute;
		            top: 50px;
		            z-index:10;}
		    .n2{width: 100px;
		            height: 100px;
		            border-radius: 50%;
		            background-color:white;
		            position: absolute;
		            top: -50px;
		            right: 0px;}
		       .a1{width: 25px;
		            height: 25px;
		            border-radius: 50%;
		            background-color:white;
		            position: absolute;
		            top: 25px;
		            right:38px;
		           }
		        .a2{width: 25px;
		            height: 25px;
		            border-radius: 50%;
		            background-color:black;
		            position: absolute;
		            top: 50px;
		            right:38px;}
		</style>
	</head>

	<body>
		<div class="tiji">
			<div class="name1">
				<div class="n1">
					<div class="a1"></div>
				</div>
			</div>
			<div class="name2">
				<div class="n2">
					<div class="a2"></div>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
		var f=0;
		var e=0;
		var frot=20;
		var erot=20;
		
		setInterval(function()
		{var ti=document.querySelector(".tiji")
	
		f=f+frot;
		e=e+erot;
        if(f>=1010-200)//HTML-球的距离
          {frot=-20;}//向左返回
        if(f<=0)
          {frot=20;}
        if(e>=407)//竖的距离
          {erot=-20;}
        if(e<=0)
          {erot=20;}
          ti.style.left=f+"px";
          ti.style.top=e+"px";},200)//200指球运动速度
			
		</script>
		
		
	
		
	</body>

</html>
	</body>
</html>
